<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>
    
    <h1>My shopping list</h1>
    <form>
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button  onclick="addItem()" type="button">Add item</button>
    </div>
   
    <ul id ="p">
      <!-- <li><span>12312</span><button  onclick="deleteTheDom()">Delete</button></li> -->
    </ul>
    <div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button  onclick="removeAll()" type="button">清空</button>
    </div>

  </form>

    <script>

      /**
      要求：
      1、点击additem 将输入框中的文字放置列表中，并将输入框清空
      2、不允许输入空值 ，空值提示
      3、列表中的行点击delete按钮可实现删除该行
      4、刷新页面将输入框清空
      5、实现方式必须为第10章内容，dom节点可以随意添加属性
      6、截至下周二前
      新增需求
      1、输入框过滤前后空字符串
      2、记录输入框输过的文字，在  <p id="cotent"></p> 标签中显示，按 ',' 号分割
      3、点击清空按钮清空列表，并清空 <p id="cotent"></p> 标签
      4、点击列表中的删除按钮，请将<p id="cotent"></p> 标签中对应的文字也一并删除掉
      5、列表中的文字不允许重复 （若重复则什么也不做，然后清空输入框）
      6、增加一键批量功能： 输入框中的文字 当出现 '#' 符号，列表中增加分割后的文字（也要过滤重复的情况）
      7、html页面有所改动，外层增加了form标签，不要随意删除
      8、实现方式必须为前10章内容，dom节点可以随意添加属性
      6、截至本周日下午下班前
      **/
      
      var data = []
      function addItem(){


       
        var value = document.getElementById("item").value.trim();
        if(value==""){
          alert("请填写值");
          return;
        }
        var split = value.split("#");
        for(var i =0,len= split.length;i<len;i++){
          if(split[i].trim()!=="" && data.indexOf(split[i].trim())<0){
            data.push(split[i]);
            addFunc(split[i].trim());
          }
        }
        syncShop();
        
      }

      function syncShop(){
        clearContent(document.getElementById("cotent"));
        if(data.length>0)
          document.getElementById("cotent").appendChild(document.createTextNode(data.join(",")));
      }

      function clearContent(_dom){
        var contentChildNodes = _dom.childNodes;
        if(contentChildNodes.length>0){
          for(var leng=contentChildNodes.length, ii=leng-1;ii>=0;ii--){
            _dom.removeChild(contentChildNodes[ii]);
          }
        }
      }

      function addFunc(value){
        var p = document.getElementById("p");

        var span = document.createElement("span");
        span.append(value);
		    document.getElementById("item").value='';
		
        var button = document.createElement("button");
        button.setAttribute('onclick','deleteTheDom(this)');
        button.type="button";
        button.appendChild(document.createTextNode("Delete"));
		
        var li = document.createElement("li");
        li.appendChild(span);
        li.appendChild(button);
        
        p.appendChild(li);
      }



      function deleteTheDom(_ob){
        //_ob指向当前节点
        data.splice(data.indexOf(_ob.parentElement.firstChild.firstChild.nodeValue.trim()),1);
        syncShop();
        _ob.parentElement.parentElement.removeChild(_ob.parentElement);
      }

      function removeAll(){
        clearContent(document.getElementById("p"));
        clearContent(document.getElementById("cotent"));
        data=[];
      }

    </script>
  </body>
</html>